<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import type { FormInstance } from "vant";
import { useRequest } from "vue-request";
import useCountDown from "@/utils/hooks/useCountdown";
import rules from "@/utils/rules";

const step = ref(1);
const formRef = ref<FormInstance>();
const { timeCount, timeEnable, onStartCountdown } = useCountDown();
const formData = reactive({
  phone: "",
  code: "",
});

const onNext = () => {
  step.value++;
};

// 是否可以获取验证码
const btnCodeDisabled = computed(() => !rules.phone.test(formData.phone));

const onSubmit = async () => {
  try {
    await formRef.value?.validate();
    console.log(formData);
  } catch (error) {}
};

const { loading: codeLoading, run: reloadCode } = useRequest(
  async () => {
    return new Promise<boolean>((resolve) => {
      formRef.value?.validate("phone").then(() => {
        resolve(true);
      });
    });
  },
  {
    onSuccess: () => {
      onStartCountdown();
    },
    manual: true,
  }
);
</script>

<template>
  <div class="box">
    <div class="step1" v-if="step === 1">
      <img class="icon" src="@/assets/images/settings-phone.svg" />
      <div class="info">
        <div class="info-title">当前手机号</div>
        <div class="info-value">+ 86-13104561234</div>
      </div>
      <ProButton class="mt-30px" @click="onNext">更换手机号</ProButton>
    </div>
    <div class="step2" v-if="step === 2">
      <van-form ref="formRef">
        <van-field
          v-model="formData.phone"
          label="手机号"
          required
          type="number"
          name="phone"
          placeholder="请输入新的手机号"
          :rules="[
            {
              required: true,
              message: '请填写手机号',
            },
            { pattern: rules.phone, message: '请填写正确的手机号' },
          ]"
        />
        <van-field
          v-model="formData.code"
          required
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <div class="sendCode">
              <span
                :class="{
                  loading: codeLoading,
                  disabled: btnCodeDisabled,
                }"
                @click="reloadCode"
                v-if="timeEnable"
                >发送验证码</span
              >
              <span class="time-desc" v-else>{{ timeCount }}秒后重新获取</span>
            </div>
          </template></van-field
        >
      </van-form>
      <div class="btn-box">
        <ProButton @click="onSubmit">提交</ProButton>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  .step1 {
    font-size: var(--lg-font-size);
    font-weight: 400;
    display: grid;
    justify-items: center;
    margin-top: 40px;
    padding: 0 16px;
    .icon {
      width: 88px;
      height: 88px;
    }
    .info {
      display: flex;
      justify-content: center;
      margin-top: 24px;
      &-title {
        color: #8d9092;
        margin-right: 14px;
      }

      &-value {
        color: #222222;
      }
    }
  }
  .step2 {
    font-weight: 400;
    margin-top: var(--margin-value);
    font-size: var(--lg-font-size);
    --van-field-label-width: 68px;
    .sendCode {
      color: var(--primary-color);
      border-left: 1px solid #f3f3f3;
      padding-left: 16px;
    }
    .loading {
      pointer-events: none;
    }
    .disabled {
      color: #b2b2b6;
      pointer-events: none;
    }
    .time-desc {
      font-weight: normal;
      color: #b2b2b6;
      font-size: 12px;
    }
  }
  .btn-box {
    padding: 0 16px;
    margin-top: 40px;
  }
  .mt-30px {
    margin-top: 30px;
  }
}
</style>
